<template>
  <div class="f-form-container">
    <el-form class="f-form" ref="searchForm" v-bind="formConfig" :model="form">
      <el-form-item v-for="(item, index) of formItems" :key="`${item.prop}_${index}`" v-bind="item">
        <component :style="{ width: formConfig.itemWidth }" :is="item.bind.tag" v-bind="item.bind" v-model="form[item.prop]" />
      </el-form-item>
    </el-form>
    <div class="f-toggle-container">
      <div class="cursor-point f-toggle" @click="toggleStatus">
        <f-icon :icon="toggle ? 'ArrowDown' : 'ArrowUp'" size="14" color="#409EFF" type="element" />
        <span class="f-toggle-text">{{ toggle ? '收起' : '展开' }}</span>
      </div>
      <div>
        <el-button @click="onSubmit" type="primary">查询</el-button>
        <el-button @click="onReset">重置</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useForm } from './src/hooks'

const emits = defineEmits(['getResponse'])

const props = defineProps({
  formConfig: { type: Object, default: () => ({ labelWidth: '60px', itemWidth: '240px', inline: true }) },
  formList: { type: Array, default: () => ref([]).value },
  api: { type: String, required: true },
  initForm: { type: Object, default: () => ref({}).value }
})

const { searchForm, form, toggle, formItems, toggleStatus, onSubmit, onReset } = useForm(props, emits)
</script>

<style scoped>
.f-form-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #ffffff;
  box-sizing: border-box;
  padding: 14px;
}
.f-form-container .f-toggle-container {
  flex-shrink: 0;
  width: 150px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 20px;
  box-sizing: border-box;
}
.f-form-container .f-form .el-form-item {
  margin-right: 0;
  margin-bottom: 20px;
}
.f-form-container .f-toggle {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20px;
  height: 32px;
  justify-content: flex-end;
}
.f-form-container .f-toggle-text {
  color: #409eff;
  margin-left: 2px;
  user-select: none;
  font-size: 14px;
}
</style>
